<template>
  <CommonPage>
    <MyTable
      ref="$table"
      v-model:query-items="queryItems"
      v-model:checked-row-keys="checkedRowKeys"
      :columns="columns"
      :get-data="auditApi.list"
      :row-key="'id'"
      :scroll-x="1800"
      :query-format="methods.queryFormat"
      list-key="TaskExamine:list"
    >
      <template #search>
        <MyTQI>
          <n-input
            v-model:value="queryItems.searchVal"
            type="text"
            placeholder="请输入搜索关键词"
            clearable
          >
            <template #suffix>
              <n-icon size="20" :component="Search"></n-icon>
            </template>
          </n-input>
        </MyTQI>
        <MyTQI>
          <AsyncSelect
            v-model:value="queryItems.reviewStatus"
            placeholder="选择审核状态"
            :options="[
              { label: '待审核', value: '0' },
              { label: '通过 ', value: '1' },
              { label: '拒绝 ', value: '2' },
            ]"
          />
        </MyTQI>
        <MyTQI>
          <AsyncSelect
            v-model:value="queryItems.applicationType"
            placeholder="选择申请类型"
            :options="[
              { label: '排期变更', value: '0' },
              { label: '工期变更', value: '1' },
            ]"
          />
        </MyTQI>
        <MyTQI label="提交时间" :content-width="300">
          <n-date-picker
            v-model:formatted-value="queryItems.timeRange"
            type="daterange"
            clearable
          />
        </MyTQI>
      </template>
      <template #action>
        <n-button v-permission="`TaskExamine:batch`" type="primary" @click="onMultipleAudit">
          批量审核
        </n-button>
      </template>
    </MyTable>
    <MyModal
      ref="$form"
      :model-form="model"
      :disabled="type === 'view'"
      :width="520"
      class="auditModal"
      :show-footer="!(type == 'view')"
      @submit="handleSubmit"
    >
      <div v-if="type === 'multiple'">
        <n-radio-group v-model:value="model.reviewStatus">
          <n-radio :value="1">通过</n-radio>
          <n-radio :value="2">拒绝</n-radio>
        </n-radio-group>
        <div class="label">请确认是否{{ model.reviewStatus == 1 ? '通过' : '拒绝' }}以下申请</div>
        <div class="selectedNum">已选中申请 {{ checkedRowKeys.length }} 条</div>
        <div class="label">审核意见</div>
        <n-form-item path="comments">
          <n-input
            v-model:value="model.comments"
            clearable
            :maxlength="300"
            show-count
            type="textarea"
            :autosize="{
              minRows: 3,
            }"
          />
        </n-form-item>
      </div>
      <div v-if="type === 'single'">
        <div class="label">请确认是否通过以下申请</div>
        <div class="singleRowList">
          <div class="rowInfoItem flex">
            <div class="key">项目名称：</div>
            <div class="value">
              {{
                `${model.projectName} V.${model.projectVersion || 0}.${
                  model.projectVersionMinor || 0
                }`
              }}
            </div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">任务名称：</div>
            <div class="value">{{ model.teskName }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请类型：</div>
            <div class="value">{{ model.applicationType == '0' ? '排期变更' : '工期变更' }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请前：</div>
            <div class="value">{{ model.beforeApplication }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请后：</div>
            <div class="value">{{ model.afterApplication }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请原因：</div>
            <div class="value">{{ model.applicationReason }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请人：</div>
            <div class="value">{{ model.applicantName }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请时间：</div>
            <div class="value">{{ $format(model.createTime) }}</div>
          </div>
        </div>
        <div class="label">相关影响</div>
        <div class="flex flex-row justify-between">
          <div class="formLabel flex flex-col">
            是否刷新本任务后续关联任务的排期
            <div class="tips">如选【 是 】后续任务排期顺延</div>
          </div>
          <n-form-item path="refresh">
            <n-radio-group v-model:value="model.refresh">
              <n-radio :value="1">是</n-radio>
              <n-radio :value="0">否</n-radio>
            </n-radio-group>
          </n-form-item>
        </div>
        <div class="label">审核意见</div>
        <n-form-item path="comments">
          <n-input
            v-model:value="model.comments"
            clearable
            :maxlength="300"
            show-count
            type="textarea"
            :autosize="{
              minRows: 3,
            }"
          />
        </n-form-item>
      </div>
      <div v-if="type === 'reject'">
        <div class="label">请确认是否拒绝以下申请</div>
        <div class="singleRowList">
          <div class="rowInfoItem flex">
            <div class="key">项目名称：</div>
            <div class="value">
              {{
                `${model.projectName} V.${model.projectVersion || 0}.${
                  model.projectVersionMinor || 0
                }`
              }}
            </div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">任务名称：</div>
            <div class="value">{{ model.teskName }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请类型：</div>
            <div class="value">{{ model.applicationType == '0' ? '排期变更' : '工期变更' }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请前：</div>
            <div class="value">{{ model.beforeApplication }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请后：</div>
            <div class="value">{{ model.afterApplication }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请原因：</div>
            <div class="value">{{ model.applicationReason }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请人：</div>
            <div class="value">{{ model.applicantName }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请时间：</div>
            <div class="value">{{ $format(model.createTime) }}</div>
          </div>
        </div>
        <div class="label">审核意见</div>
        <n-form-item path="comments">
          <n-input
            v-model:value="model.comments"
            clearable
            :maxlength="300"
            show-count
            type="textarea"
            :autosize="{
              minRows: 3,
            }"
          />
        </n-form-item>
      </div>
      <div v-if="type === 'view'">
        <div class="label">以下申请已{{ model.reviewStatus == 1 ? '通过' : '拒绝' }}</div>
        <div class="singleRowList">
          <div class="rowInfoItem flex">
            <div class="key">项目名称：</div>
            <div class="value">
              {{
                `${model.projectName} V.${model.projectVersion || 0}.${
                  model.projectVersionMinor || 0
                }`
              }}
            </div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">任务名称：</div>
            <div class="value">{{ model.teskName }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请类型：</div>
            <div class="value">{{ model.applicationType == '0' ? '排期变更' : '工期变更' }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请前：</div>
            <div class="value">{{ model.beforeApplication }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请后：</div>
            <div class="value">{{ model.afterApplication }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请原因：</div>
            <div class="value">{{ model.applicationReason }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请人：</div>
            <div class="value">{{ model.applicantName }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">申请时间：</div>
            <div class="value">{{ $format(model.createTime) }}</div>
          </div>
        </div>
        <div class="label">审核意见</div>
        <n-form-item path="comments">
          <n-input
            v-model:value="model.comments"
            clearable
            :maxlength="300"
            show-count
            type="textarea"
            :autosize="{
              minRows: 3,
            }"
          />
        </n-form-item>
        <div class="singleRowList">
          <div class="rowInfoItem flex">
            <div class="key">审核时间：</div>
            <div class="value">{{ $format(model.updateTime) }}</div>
          </div>
          <div class="rowInfoItem flex">
            <div class="key">审核人：</div>
            <div class="value">{{ model.updateUserName }}</div>
          </div>
        </div>
      </div>
    </MyModal>
  </CommonPage>
</template>

<script setup lang="jsx">
import { Search } from '@vicons/ionicons5'
import * as auditApi from '@/api/audit'
import { useAuditPro } from '@/hooks/useAuditPro'
import { formatToIds } from '@/utils/format'
import { useUserStore } from '@/store'
defineOptions({ name: 'AuditIndex' })
const userStore = useUserStore()
const router = useRouter()
const queryItems = ref({})
const checkedRowKeys = ref([])
const methods = reactive({
  queryFormat: ({ timeRange, ...params }) => {
    if (timeRange?.length === 2) {
      const [startTime, endTime] = timeRange
      params.startTime = startTime
      params.endTime = endTime
    }
    return params
  },
})
const rowObj = ref(null)
const columns = [
  {
    type: 'selection',
    width: 50,
    disabled(row) {
      return row.reviewStatus != 0
    },
  },
  {
    title: '序号',
    render: (_, index) => {
      return `${index + 1}`
    },
    width: 80,
  },
  {
    key: 'projectName',
    title: '项目名称',
    render: (row) => (
      <div
        class="cursor-pointer color-#0A56D8 underline"
        style="white-space: normal;word-break: break-all;word-wrap: break-word;"
        onClick={() =>
          router.push({
            path: `/project/detail`,
            query: { id: row.projectId, active: 'ProgressManage' },
          })
        }
      >{`${row.projectName} V.${row.projectVersion || 0}.${row.projectVersionMinor || 0}`}</div>
    ),
  },
  { key: 'teskName', title: '任务名称' },
  { key: 'applicantName', title: '申请人' },
  {
    key: 'applicationType',
    title: '申请类型',
    render(row) {
      switch (row.applicationType) {
        case 0:
          return '排期变更'
        case 1:
          return '工期变更'
        default:
          break
      }
    },
  },
  { key: 'beforeApplication', title: '申请前', width: 220 },
  { key: 'afterApplication', title: '申请后', width: 220 },
  { key: 'applicationReason', title: '申请原因', width: 220 },
  {
    key: 'reviewStatus',
    title: '审核状态',
    render(row) {
      switch (row.reviewStatus) {
        case 0:
          return '待审核'
        case 1:
          return '通过'
        case 2:
          return '拒绝'
        default:
          break
      }
    },
  },
  {
    key: 'createTime',
    title: '提交时间',
    width: 220,
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '操作',
    key: 'actions',
    width: 220,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      if (row.reviewStatus !== 0) {
        return (
          <n-flex>
            <n-button
              text
              onClick={() => {
                rowObj.value = row
                handleView()
              }}
            >
              查看
            </n-button>
          </n-flex>
        )
      } else {
        return (
          <n-flex>
            <n-button
              v-permission="TaskExamine:update"
              text
              onClick={() => {
                rowObj.value = row
                handleSingleAudit()
              }}
            >
              通过
            </n-button>
            <n-button
              v-permission="TaskExamine:update"
              text
              onClick={() => {
                rowObj.value = row
                handleReject()
              }}
            >
              拒绝
            </n-button>
          </n-flex>
        )
      }
    },
  },
]
function onMultipleAudit() {
  if (checkedRowKeys.value.length) {
    handleMultipleAudit({ ids: formatToIds(checkedRowKeys.value) })
  } else {
    $message.warning(`请选择审核!`)
  }
}
const {
  type,
  model,
  $form,
  $table,
  handleMultipleAudit,
  handleSingleAudit,
  handleReject,
  handleView,
  handleSubmit,
} = useAuditPro({
  name: '项目资料',
  initForm: {
    projectName: null,
    projectVersion: null,
    projectVersionMinor: null,
    teskName: null,
    applicationType: null,
    beforeApplication: null,
    afterApplication: null,
    applicationReason: null,
    applicantName: null,
    createTime: null,
    id: null,
    refresh: null,
    comments: null,
    ids: null,
    reviewStatus: null,
    updateTime: null,
    updateUserName: null,
  },
  apis: {
    single: auditApi.single,
    multiple: auditApi.multiple,
    reject: auditApi.single,
    info: () => {
      return rowObj.value
    },
  },
  handleReset() {
    checkedRowKeys.value = []
  },
})

onBeforeMount(() => {
  userStore.getUnauditedCount()
})
</script>
<style lang="scss" scoped>
.auditModal {
  .label {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #030912;
    line-height: 24px;
    position: relative;
    margin-bottom: 12px;
    &::after {
      content: '';
      position: absolute;
      height: 100%;
      width: 4px;
      background: #0a56d8;
      top: 0;
      left: -12px;
    }
  }
  .selectedNum {
    display: inline-block;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #030912;
    line-height: 20px;
    padding: 1px 8px;
    background: rgba(155, 163, 178, 0.2);
    border-radius: 4px;
    margin-bottom: 24px;
  }
  .singleRowList {
    .rowInfoItem {
      margin-bottom: 8px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .key {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #686f7c;
        line-height: 24px;
        text-align: end;
        min-width: 70px;
      }
      .value {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #3a3e45;
        line-height: 24px;
      }
    }
    margin-bottom: 24px;
  }
  .formLabel {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #3a3e45;
    line-height: 24px;
  }
  .tips {
    font-size: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #686f7c;
    line-height: 20px;

    margin-top: 4px;
    margin-bottom: 24px;
  }
}
</style>
